<template>
    <div class="content">
      <div class="title" style="background-color: white">
        <span>全部已读（{{redNum}}）</span>
        <span>全部未读（{{notRedNum}}）</span>
      </div>
      <el-table
        :data="tableData"
        :show-header="false"
        style="cursor: pointer"
        @row-click="redMessage">
        <el-table-column
          label="类型"
          width="350"
          :show-overflow-tooltip='true'>
          <template slot-scope="scope">
            <div v-if="scope.row.messageType == 0">
              <i class="icon-zhaoshangxiaochengxu-xitongxiaoxi"></i>
              <span class="message_type" :class=" scope.row.isRead ? 'isRead' : '' ">系统消息</span>
            </div>
            <div v-if="scope.row.messageType == 2">
              <i class="icon-weidu"></i>
              <span class="message_type" :class=" scope.row.isRead ? 'isRead' : '' ">{{scope.row.title}}</span>
            </div>
            <div v-if="scope.row.messageType == 3">
              <i class="icon-order-pending"></i>
              <span class="message_type" :class=" scope.row.isRead ? 'isRead' : '' ">{{scope.row.title}}</span>
            </div>

            <div v-if="scope.row.messageType == 5">
              <i class="icon-shenpi"></i>
              <span class="message_type" :class=" scope.row.isRead ? 'isRead' : '' ">{{scope.row.title}}</span>
            </div>
          </template>

        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="内容">
          <template slot-scope="scope">
            <div v-html="scope.row.title" :class=" scope.row.isRead ? 'isRead' : '' " v-if="scope.row.messageType == 0"></div>
            <div :class=" scope.row.isRead ? 'isRead' : '' " v-else>
              {{scope.row.content}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="时间"
        width="200">
          <template slot-scope="scope">
            <span style="color: #8c8c8c">{{scope.row.createTime}}</span>
          </template>
        </el-table-column>

        <div slot="empty">
          <div>
            <img :src="empty" alt="" style="width: 250px" />
          </div>
        </div>

      </el-table>

      <div v-if="total > 0" class="footer">
        <el-pagination
          style="margin-top: 10px"
          class="fixed"
          align="right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNo"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>

    </div>
</template>

<script>
    import {userMessage, isRead} from '@/api/message'
    import {getDiffList} from "@/util/util"
    export default {
        name: "all",
        data() {
            return{
                empty:'./img/empty.png',
                tableData: [],
                pageNo: 1,
                pageSize: 10,
                total:0,
                redNum: 0,
                notRedNum: 0,
            }
        },
        created() {
          this.init()
        },
        mounted() {
        },
        methods: {
            init() {
                userMessage(this.pageNo, this.pageSize, '', this.$route.params.type).then(res => {
                  if(res.data.success) {
                      this.tableData = res.data.data.page.records;
                      this.total = res.data.data.page.total
                      this.redNum = res.data.data.countModel.reads
                      this.notRedNum = res.data.data.countModel.notReads
                  }
                })
            },
            handleSizeChange(size) {
                this.pageSize = size
                this.init()
            },
            handleCurrentChange(page) {
                this.pageNo = page
                this.init()
            },
            redMessage(item) {
                //判断是否为邮件消息
                if(!item.isRead) {
                    isRead(item.id).then(res => {
                        if(res.data.success) {
                            if(item.messageType==2||item.messageType==3){
                             this.dealEmail(item)
                            } else if (item.messageType == 5 && item.subMessageType == 0) {
                                this.$router.push({
                                    path: '/mail/approval/exam/detail',
                                    query: {
                                        id: item.contentId
                                    }
                                })
                            } else if (item.messageType == 5 && item.subMessageType == 1 || item.subMessageType == 2) { // 跳转到审批不通过
                                this.$router.push({
                                    path: '/mail/approval/apply/detail',
                                    query: {
                                        id: item.contentId
                                    }
                                })
                            } else {
                                this.$router.push(`/message/detail/${item.id}`)
                            }
                            this.$store.dispatch('set_message') // 重新刷新未读消息
                        }
                    })
                } else{
                    if(item.messageType==2||item.messageType==3){
                        this.dealEmail(item)
                    }else if (item.messageType == 5 && item.subMessageType == 0) {
                        this.$router.push({
                            path:'/mail/approval/exam/detail',
                            query:{
                                id: item.contentId
                            }
                        })
                    }else if (item.messageType == 5 && item.subMessageType == 1 || item.subMessageType == 2) { // 跳转到审批不通过
                        this.$router.push({
                            path: '/mail/approval/apply/detail',
                            query: {
                                id: item.contentId
                            }
                        })
                    } else {
                        this.$router.push(`/message/detail/${item.id}`)
                    }
                }
            },
            dealEmail(item){
                const ID = item.contentId+"a";
                //收件箱 2
                let target='',path='',name='',frag='';
                if(item.messageType == 2){
                    target = 'SET_EMAILLISTTAB';
                    path ='/mail/index';
                    name = 'emailListTab';
                    frag =0;
                }else{
                    target = 'SET_EMAILLISTPENDINGTAB';
                    path ='/mail/pending/index';
                    name = 'emailListPendingTab';
                    frag =1;
                }
                if (getDiffList(ID,name)==-1) {
                    this.$store.commit(target, {
                        type: 1, row: {
                            id: ID,
                            title: item.content,
                            state:1,
                            close: true
                        }
                    })
                }else{
                    this.$store.commit(target, {type:0,current:ID})
                }
                sessionStorage.setItem("lastpath", path)
                this.$store.commit('SET_ISFRAG', frag)
                this.$router.push({path:path})
            }

        },
        watch: {
            '$route': function () {
                this.init()
            }
        }
    }
</script>

<style scoped lang="scss">
.message_type{
  margin-left: 15px;
  color: #435B77;
  font-weight: 600;
}
  .title{
    padding-top: 20px;
    color: #2A97F9;
    padding-bottom:15px
  }
  .isRead{
    color: #8C8C8C;
  }
  .content{
    font-size: 13px;
    height: 100%;
  }
</style>
